<template>
    <div class="list-wrapper">
        <van-pull-refresh :class="[
            bottomPosition === 1 ? 'refresh-container' : 'refresh-container2',
            isSafari ? 'safari' : '',
            isEdge ? 'edge' : '',
        ]" v-model="topLoading" @refresh="onRefresh">
            <van-list ref="listRef" v-model:loading="bottomLoading" :finished="loadMoreContent" finished-text="没有更多了"
                @load="onLoadMore">
                <slot :dataList="dataList"></slot>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup lang="ts">
import { isSafariBrowser, isEdgeBrowser } from '@/utils/browser'

const listRef = ref()

const props = defineProps<{
    requestData: (pageIndex: number, pageSize: number) => Promise<any>
    bottomPosition: number
    loadMore?: number  //是否可以加载更多模式  1:total:总条数模式  2:pageIndex:页码模式
}>()

const dataList = ref<any[]>([])

const total = ref(0)

const pageIndex = ref(1)

const pageSize = ref(10)

const isSafari = ref(false)

const isEdge = ref(false)

//下拉刷新loading
const topLoading = ref(false)

//上拉加载loading
const bottomLoading = ref(false)

onMounted(() => {
    // 使用全局配置或浏览器检测
    isSafari.value = isSafariBrowser()

    isEdge.value = isEdgeBrowser().isEdge && isEdgeBrowser().isAndroid
})

//是否可以加载更多
const canLoadMore = computed(() => {
    return dataList.value.length >= total.value
})

//是否可以加载更多
const canLoadMorePage = computed(() => {
    return pageIndex.value === 6
})

const loadMoreContent = computed(() => {

    if (props.loadMore) {
        if (props.loadMore === 1) {
            return canLoadMore.value
        } else {
            return canLoadMorePage.value
        }
    } else {
        return canLoadMore.value
    }
})

//请求列表数据
const requestData = () => {
    return props.requestData && props.requestData(pageIndex.value, pageSize.value)
}

//初始化数据
const dataInitialization = async () => {
    pageIndex.value = 1
    try {
        const res = await requestData()

        dataList.value = res.data

        total.value = res.total

        listRef.value.check()
    } catch (error) {
        //
    }
}

//下拉刷新
const onRefresh = async () => {
    pageIndex.value = 1
    try {
        topLoading.value = true

        await dataInitialization()

        listRef.value.check()
    } catch (error) {
        //
    } finally {
        topLoading.value = false
    }
}

//上拉加载
const onLoadMore = async () => {
    bottomLoading.value = true

    pageIndex.value++

    try {
        const res = await requestData()

        dataList.value.push(...res.data)

        total.value = res.total

    } catch (error) {
        //
    } finally {
        bottomLoading.value = false

    }
}

defineExpose({ dataInitialization, onRefresh, onLoadMore, dataList, pageIndex, pageSize })

</script>

<style lang="scss" scoped>
.safari {
    :deep(.van-list__finished-text) {
        margin-bottom: 50px;
    }
}

.edge {
    :deep(.van-list__finished-text) {
        margin-bottom: 80px; // 增加Edge浏览器底部margin
    }
}

.list-wrapper {
    height: 100%;
    overflow: scroll;    /* 改为scroll而非auto */
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0);    /* 使用iOS安全区域变量 */
    overscroll-behavior: contain;    /* 防止过度滚动 */

    .refresh-container {
        min-height: 100%;
    }

    .refresh-container2 {
        min-height: 100%;
    }

    .safari-bottom-space {
        height: 80px;
        /* 增加底部空间高度 */
        width: 100%;
    }
}
</style>